<script setup lang="ts">
defineOptions({
  name: "Success"
});

const columns = [
  {
    label: "资产：",
    value: "127.1.3.5:"
  },
  {
    label: "负责人：",
    value: "明明"
  },
  {
    label: "是否报备：",
    value: "是"
  },
  {
    label: "是否确认：",
    value: "是"
  },
  {
    label: "报备时间：",
    value: "2023-10-11"
  }
];

const url =
  "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg";

const srcList = [
  "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
];
</script>

<template>
  <el-card shadow="never">
    <template #header>
      <div class="card-header">
        <span class="font-medium">工单详情</span>
      </div>
    </template>
    <el-result
      icon="success"
      title="提交成功"
      v-if="false"
      sub-title="提交结果页用于反馈一系列操作任务的处理结果， 如果仅是简单操作，使用 Message 全局提示反馈即可。 本文字区域可以展示简单的补充说明，如果有类似展示 “单据”的需求，下面这个灰色区域可以呈现比较复杂的内容。"
    >
      <template #extra>
        <div class="flex">
          <el-button type="primary">返回列表</el-button>
          <el-button>查看项目</el-button>
          <el-button>打印</el-button>
        </div>
      </template>
    </el-result>
    <div class="p-6 w-[90%] m-auto bg-[#fafafa] dark:bg-[#1d1d1d]">
      <PureDescriptions title="工单名称" :columns="columns" class="mb-5" />
      <el-steps :active="2" process-status="process">
        <!-- process-status= -->
        <!-- 'wait' | 'process' | 'finish' | 'error' | 'success' -->
        <el-step title="工单下发">
          <template #description>
            <p>明明</p>
            <div class="demo-image__preview">
              <el-image
                style="width: 100px; height: 100px"
                :src="url"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :preview-src-list="srcList"
                :initial-index="4"
                fit="cover"
              />
            </div>
          </template>
        </el-step>
        <el-step title="工单回复">
          <template #description>
            <p class="flex items-center">亮亮</p>
            <div class="demo-image__preview">
              <el-image
                style="width: 100px; height: 100px"
                :src="url"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :preview-src-list="srcList"
                :initial-index="4"
                fit="cover"
              />
            </div>
          </template>
        </el-step>
        <el-step title="资产报备" />
        <el-step title="完成" />
      </el-steps>
    </div>
  </el-card>
</template>

<style scoped>
:deep(.el-descriptions__body) {
  background: transparent;
}
</style>
